<script lang="ts" setup>
import { useLocalStorage } from '@peng_kai/kit/libs/vueuse';
import { useActivityWelcomeBonus } from '~/components-business/global-popups/newWallet/ts/depositBonusInfoHook';
import WelcomeBonusHome from './WelcomeBonusHome.vue';

const [setEle, eleBp] = useElementBreakpoint({ '8xl': 1300 });

const { getBonusListRef } = useActivityWelcomeBonus();

const getIsShowRef = computed(() => getBonusListRef.value.filter(x => x.available).length > 0);

const router = useRouter();

function onQuestion() {
  router.push({ name: RN.PROMO });
}
</script>

<template>
  <div :ref="setEle">
    <div v-show="getIsShowRef" :class="eleBp.lt8xl ? 'welcome-banner-mobile' : 'welcome-banner-pc'">
      <img v-if="!eleBp.lt8xl" class="welcome-banner-decor" src="../../imgs/welcome-banner__decor.png" alt="fury">
      <div
        class="z-1"
        :class="eleBp.lt8xl ? 'mb-2.5 flex items-center gap-1 text-5 font-700 px-2.5' : 'text-6 font-900 px-0 min-w-40 max-w-43.5' "
      >
        <p class="text-rose-500 leading-7">
          {{ $t('6YpWDoHC5ikcZc9IHuzk') }}
        </p>
        <p>
          590%
        </p>
        <RouterLink :class="eleBp.lt8xl ? 'ml-auto' : ''" :to="{ name: RN.PROMO }">
          <div class="mt-1 text-3.5 text-amber font-500">
            <span>{{ $t('ngpXy7cwue8eObbMpI6a0') }}</span>
            <i class="i-ri:arrow-right-s-line mb-0.5" />
          </div>
        </RouterLink>
      </div>

      <div class="welcome-bonus-det-mobile">
        <WelcomeBonusHome :size="eleBp['8xl'] ? 'large' : 'small'" :onQuestion="onQuestion" />
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.welcome-bonus-det-mobile {
  --uno: 'w-full overflow-x-auto';
  &::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
  } //IE 10+
  -ms-overflow-style: none !important; //Firefox
  overflow: -moz-scrollbars-none !important;
}

.welcome-banner-pc {
  --uno: 'relative py-2 overflow-hidden gap-7.5 flex rounded-4.5 items-stretch my-10 pl-5 pr-35 justify-between box-content';

  &::before {
    background-image: url('../../imgs/bg.png');
    background-size: 100% 100%;
    content: '';
    height: 100%;
    left: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 100%;
  }
}
// 移动端
.welcome-banner-mobile {
  background: var(--sys-layer-e, #3e404c);
  box-shadow: 0px -4px 0px 0px rgba(0, 0, 0, 0.25) inset;
  --uno: 'relative px-0 pt-2 pb-2.5 gap-7.5 rounded-2 items-center my-3 h-full overflow-hidden';
  &::-webkit-scrollbar {
    width: 0 !important;
  } //IE 10+
  -ms-overflow-style: none; //Firefox
  overflow: -moz-scrollbars-none;
}

.welcome-banner-decor {
  --uno: 'absolute bottom-0 right-0 w-38.5 z-2 pointer-events-none';
}
</style>
